<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <template #header>
                <div>
                    <h2>
                        轮播图设置
                    </h2>
                </div>
            </template>
            <el-form :model="formInline">
                <el-row :gutter="20">
                    <el-col :span="6" :offset="0">
                        <el-form-item label="名称">
                            <el-input v-model="formInline.name" placeholder="请输入搜索名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="0">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button type="success" @click="handleJump(1, undefined)">新增</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-divider />
            <el-table :data="tableData" stripe style="width: 100%" :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ backgroundColor: '#f2f2f2', textAlign: 'center' }">
                <el-table-column label="名称" prop="name" width="180" />
                <el-table-column label="类型" prop="type" width="180">
                    <template #default="scope">
                        <el-tag :type="scope.row.type == '电脑端' ? '' : 'success'" size="small" effect="dark">{{
                            scope.row.type }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="图片" prop="photo">
                    <template #default="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.photo" :zoom-rate="1.2"
                            :preview-src-list="[scope.row.photo]" :initial-index="100" fit="cover" :preview-teleported='true'/>
                    </template>
                </el-table-column>
                <el-table-column label="上传时间" prop="createdAt">
                    <template #default="scope">
                        {{ scope.row.createdAt.slice(0, 10) }} {{ scope.row.createdAt.slice(11, 19) }}
                    </template>
                </el-table-column>
                <el-table-column label="修改时间" prop="updatedAt">
                    <template #default="scope">
                        {{ scope.row.updatedAt?.slice(0, 10) }} {{ scope.row.updatedAt?.slice(11, 19) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleJump(2, scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无信息" />
                </template>
            </el-table>
            <el-dialog v-model="dialogFormVisible" :title="num == 1 ? '添加轮播' : '编辑轮播'" draggable>
                <BannerForm v-model="dialogFormVisible" @bannerAdd="handleAdd" v-if="dialogFormVisible"
                    :BannerInfo="BannerInfo" />
            </el-dialog>

            <div class="pagination" v-if="tableData.length">
                <el-pagination :page-sizes="[5, 10, 20, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" :default-page-size="5" />
            </div>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import BannerForm from './components/banner-form.vue'
import { BannerDel, BannerGet } from '../../api/banner';
import { BannerType } from '../../types/banner';
import { cloneDeep } from 'lodash';
import { ElMessage, ElMessageBox } from 'element-plus';
// 分页总数
const total = ref<number>(0)
const Pagesize = ref<number>(5)
// 控制
const dialogFormVisible = ref(false)

const formInline = reactive({
    name: '',
})
const tableData = ref<BannerType[]>([])
// 获取后端数据
let res = await BannerGet()
tableData.value = res.data.results
total.value = res.data.count

// 查询
const onSubmit = async () => {
    let obj = cloneDeep(formInline)
    let res = await BannerGet(1, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}
// 新增数据
const handleAdd = async () => {
    let res = await BannerGet()
    tableData.value = res.data.results
    total.value = res.data.count
}

// 分页

// 一页显示多少条
const handleSizeChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await BannerGet(1, val, obj)
    tableData.value = res.data.results
    total.value = res.data.count
    Pagesize.value = val
}
// 点击分页
const handleCurrentChange = async (val: number) => {
    // console.log(val);
    let obj = cloneDeep(formInline)
    let res = await BannerGet(val, Pagesize.value, obj)
    tableData.value = res.data.results
    total.value = res.data.count
}

//传给组件的数据
let BannerInfo = reactive({}) as BannerType | undefined
// 控制弹窗
const num = ref<number>(1)
const handleJump = (n: number, val: BannerType | undefined) => {
    dialogFormVisible.value = true
    num.value = n
    BannerInfo = val

}

// 删除数据
const handleDel = (i: number, val: BannerType) => {
    ElMessageBox.confirm(
        '你确定要悄悄删除维修记录吗?',
        '警告提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(async () => {
            ElMessage({
                type: 'success',
                message: '删除成功,快跑',
            })

            BannerDel(val.objectId!).then(async () => {
                let res = await BannerGet()
                tableData.value = res.data.results
                total.value = res.data.count
                tableData.value.splice(i, 1)
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '怂*,  点了不敢删',
            })
        })

}
</script>

<style scoped lang="scss">
div {
    color: #666;
}

h2 {
    color: #666;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid #00aeff;
    margin-bottom: 10px;
}

.pagination {
    margin-top: 15px;
}
</style>